<div *ngIf="option.visible">
  <div class="{{option.prefixCls}}-mask {{maskTransitionName}}"></div>
  <div role="dialog"
       class="{{option.prefixCls}}-wrap {{transitionName}}"
       [ngClass]="wrapCls"
  >
    <div role="document"
         class="{{option.prefixCls}}"
         [ngClass]="cls"
    >
      <div class="{{option.prefixCls}}-content">
        <div  *ngIf="option.closable" style="width: 100%; height: 21px;">
          <div role="close"
               class="{{option.prefixCls}}-close"
        >
            <span role="close" class="{{option.prefixCls}}-close-x"></span>
          </div>
        </div>
        <div *ngIf="!isNoTitle(option.title)" class="{{option.prefixCls}}-header">
          <div *ngIf="!isTemplateRef(option.title)" class="{{option.prefixCls}}-title">{{option.title}}</div>
          <ng-template *ngIf="isTemplateRef(option.title)" [ngTemplateOutlet]="option.title"></ng-template>
        </div>
        <div class="{{option.prefixCls}}-body">
          <ng-content></ng-content>
          <div *ngIf="!isTemplateRef(option.message)" class="{{option.prefixCls}}-alert-content">{{option.message}}</div>
          <ng-template *ngIf="isTemplateRef(option.message)" [ngTemplateOutlet]="option.message"></ng-template>
          <ng-template *ngIf="option.type === 'default'" [ngTemplateOutlet]="promptDefault"></ng-template>
          <ng-template *ngIf="option.type === 'secure-text'" [ngTemplateOutlet]="promptSecure"></ng-template>
          <ng-template *ngIf="option.type === 'login-password'" [ngTemplateOutlet]="promptPassword"></ng-template>
        </div>
        <div class="{{option.prefixCls}}-footer">
          <div [ngClass]="btnGroupClass" role="group">
            <div Button
                 role="button"
                 *ngFor="let button of option.footer"
                 [className]="'am-modal-button'"
                 [ngStyle]="button.style"
                 (onClick)="button.onPress()"
            >
              {{button.text}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-template #promptPassword>
  <div class="{{option.prefixCls}}-input-container">
    <div class="{{option.prefixCls}}-input">
        <input
          #inputElement
          autofocus
          [type]="'text'"
          [placeholder]="option.placeholders[0] || ''"
          [(ngModel)]="option.defaultValue[0]"
          (ngModelChange)="inputChange('text', $event)"
        >
    </div>
    <div className="{{option.prefixCls}}-input">
        <input
          #inputElement
          [type]="'password'"
          [placeholder]="option.placeholders[1] || ''"
          [(ngModel)]="option.defaultValue[1]"
          (ngModelChange)="inputChange('password', $event)"
        >
    </div>
  </div>
</ng-template>
<ng-template #promptSecure>
  <div className="{{option.prefixCls}}-input-container">
    <div className="{{option.prefixCls}}-input">
        <input
          #inputElement
          autofocus
          [type]="'password'"
          [placeholder]="option.placeholders[0] || ''"
          [(ngModel)]="option.defaultValue[0]"
          (ngModelChange)="inputChange('password', $event)"
        >
    </div>
  </div>
</ng-template>
<ng-template #promptDefault>
  <div className="{{option.prefixCls}}-input-container">
    <div className="{{option.prefixCls}}-input">
      <input
        #inputElement
        autofocus
        [type]="'text'"
        [placeholder]="option.placeholders[0] || ''"
        [(ngModel)]="option.defaultValue[0]"
        (ngModelChange)="inputChange('text', $event)"
      >
    </div>
  </div>
</ng-template>